<template>
  <a-modal
    width="60%"
    :visible="props.visible"
    title-align="center"
    @cancel="handleCancel"
    @ok="handleBeforeOk"
  >
    <template #title>
      <div>{{ form?.id ? '编辑' : '新增' }}入职通知短信模板</div>
    </template>
    <a-form
      style="width: 50%; margin: 0 auto"
      ref="refForm"
      :model="form"
      :rules="rules"
      layout="vertical"
    >
      <a-form-item field="name" label="入职通知短信模板名称：" required>
        <a-input
          placeholder="请输入"
          style="width: 350px"
          v-model="form.name"
        />
      </a-form-item>
      <a-form-item label="启用状态：">
        <a-switch
          v-model="form.enable"
          :checked-value="1"
          :unchecked-value="2"
        />
      </a-form-item>
      <a-form-item field="content" style="display: block">
        <template #label>
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            模板内容:
            <p style="color: #999999; font-size: 12px; margin: 0 20px">
              快速新增姓名（短信中会自动替换成真实的信息）
            </p>
            <div style="color: #3d7eff; cursor: pointer" @click="addContent">
              #姓名#
            </div>
          </div>
        </template>
        <RichTextNew
          v-model:content="form.detail[0].content"
          :name="'a'"
          ref="rich"
        ></RichTextNew>
      </a-form-item>
    </a-form>
    <p style="width: 50%; margin: 0 auto; font-size: 13px">
      短信签名： 【领壹制造】
    </p>
    <div style="width: 55%; margin: 0 auto; display: flex; font-size: 13px">
      <p style="margin-right: 20px">温馨提示</p>
      <div>
        <p>
          1、因为短信内容发送,需要经过通讯公司内容审核,故请规范短信内容,方便通过审核
        </p>
        <p>2、短信内容审核通过后,系统会根据您所设置的短信发送时间定时发送</p>
        <p>
          3、如您的短信审核被驳回,将会以短信形式告知您；会自动将您的短信余额返回您的账户
        </p>
        <p>4、可在发送记录查看或撤回短信</p>
        <p>
          5、如需申请企业专属短信签名,请点击查看：
          <span style="color: #3d7eff">如何申请短信签名</span>
        </p>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import {
  EditBonboardingInform,
  AddBonboardingInform,
  RepeatSchemePeople
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
import { Message } from '@arco-design/web-vue';
import clonedeep from 'lodash.clonedeep';
interface from {
  name?: string;
  tType: 1; //短信
  content?: string;
  id?: number;
  enable?: number;
  required?: number;
  detail: { content: string; codeArray?: string[] }[];
}

const props = withDefaults(
  // 参数说明
  defineProps<{
    visible?: boolean;
    oldData?: any;
    refreshFn?: any;
  }>(),
  {}
);
watch(
  () => props.oldData,
  () => {
    const { id, name, enable, detail } = props.oldData;
    form.id = id;
    form.name = name;
    form.enable = enable;
    form.detail = clonedeep(detail);
  }
);

const refForm = ref();
const form = reactive<from>({
  tType: 1,
  content: '',
  detail: [{ content: '' }]
});
watch(
  () => form?.detail[0]?.content,
  (val) => {
    form.content = val;
  }
);
const rules = {
  name: [
    {
      required: true,
      message: '短信模板名称不能为空'
    },
    {
      validator: async (value: string, cb: any) => {
        try {
          if (value === props.oldData.name && form.id) {
            //
          } else {
            const res = await RepeatSchemePeople({ name: value, tType: 1 });
            if (res.code) cb(`${res.msg}`);
          }
        } catch (error: any) {
          Message.error(error);
          console.log(error);
        }
      }
    }
  ],
  content: {
    required: true,
    trigger: "['change', 'input', 'blur']",
    message: '请填写模板内容'
  }
};
const handleCancel = () => {
  form.id = 0;
  form.name = '';
  form.enable = 2;
  form.detail = [{ content: '' }];
  emit('update:visible', false);
};
const addContent = () => {
  form.detail[0].content += `&nbsp;<span style="text-decoration: underline; color: #3598db; font-size: 12pt;">#姓名#</span>&nbsp;`;
};
const handleBeforeOk = async () => {
  const res = await refForm.value.validate();
  if (res) return;
  if (form.id) {
    let regexp = new RegExp(`#姓名#`, 'g');
    form.detail[0].content = form.detail[0].content.replace(
      regexp,
      `#C62B8DC31189847E0972B5D8F721404B1#`
    );

    await EditBonboardingInform(form);
  } else {
    let regexp = new RegExp(`#姓名#`, 'g');
    form.detail[0].content = form.detail[0].content.replace(
      regexp,
      `#C62B8DC31189847E0972B5D8F721404B1#`
    );
    await AddBonboardingInform(form);
  }
  form.id = 0;
  form.name = '';
  form.enable = 2;
  form.detail = [{ content: '' }];
  props.refreshFn();
  emit('update:visible', false);
};
const emit = defineEmits(['update:visible']);
// watch(
//   () => form.thirds,
//   () => {
//     console.log(111, form);
//   }
// );
</script>
<style lang="less" scoped>
:deep(.arco-form-item-label) {
  display: flex;
}
:deep(.w-e-text-container) {
  border-top: 1px solid #c9d8db !important ;
  width: 100%;
}
:deep(#richTexta) {
  width: 100%;
}
:deep(.w-e-toolbar) {
  display: none !important;
}
</style>
